@charset "utf-8";
html {
  display: flex;
  height: 100%;
  max-height: 100%;
  flex-direction: column;
}
body {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #212b35;
}
.wrapper {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

header {
  padding: 0 30px;
  height: 100px;
  line-height: 100px;
  color: #fff;
  background-color: #073b53;

  h1 {
    font-size: 36px;
    line-height: 100px;
  }
  .weather {
    line-height: 30px;
    img {
      height: 60px;
      margin: 20px 8px 0;
    }
    .date {
      font-size: 30px;
      margin-top: 20px;
      text-align: right;
    }
    .weather-info {
      font-size: 14px;
      margin: 0;
      text-align: right;
    }
  }
}

.content {
  flex: 1;
  display: flex;
  padding-top: 30px;
  flex-direction: column;

  .total-count {
    display: flex;
    justify-content: space-between;
    padding: 0 30px 20px;
    border-bottom: 2px solid #414a53;

    .count {
      display: flex;

      img {
        height: 44px;
        margin-right: 5px;
      }
      .name {
        font-size: 24px;
        line-height: 44px;
        color: #ccc;
      }
      .value {
        font-size: 35px;
        color: #fefefe;
      }
    }
  }
  .map-push {
    flex: 1;
    display: flex;
    padding-top: 20px;

    .map {
      border-right: 2px solid #414a53;
    }
    .push {
      padding: 15px 30px;
      display: flex;
      flex-direction: column;

      .operation-title {
        font-size: 24px;
        color: #fff;

        img {
          margin: -3px 5px 0 0;
          height: 24px;
          vertical-align: middle;
        }
      }
      .icons {
        padding: 30px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #414a53;

        .icon {
          position: relative;

          img {
            height: 80px;
            margin-bottom: 15px;
          }
          span {
            display: block;
            color: #fff;
            font-size: 16px;
            text-align: center;
          }
          span.tip {
            position: absolute;
            top: -10px;
            right: -10px;
            min-width: 20px;
            font-size: 16px;
            line-height: 20px;
            border-radius: 10px;
            background-color: #f00;
          }
        }
      }
      .message {
        flex: 1;
        margin: 20px 0 20px -15px;
        padding: 0 0 0 30px;
        overflow: hidden;

        ul {
          li {
            font-size: 18px;
            color: #fff;
            line-height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            i {
              display: inline-block;
              margin: -1px 10px 0 0;
              width: 26px;
              height: 26px;
              background-size: contain;
              vertical-align: middle;
            }
            i.repair-icon {
              background-image: url(../../images/icon/repair-icon.png);
            }
            i.upkeep-icon {
              background-image: url(../../images/icon/upkeep-icon.png);
            }
          }
        }
      }
    }
  }
}

